<template>
  <div class="default-content-background page-add">
    <qtable
      :querys="querys"
      :columns = "columns"
      dataApi="/admin/payment/charge"
      ref = 'pcOrderTable'
      >
    </qtable>
  </div>
</template>

<script>
import qtable from "../../components/qTable.vue";
export default {
  name: "page-add",
  data() {
    return {
      columns: [
        {
          title: "充值时间",
          align: "center",
          key: "time"
        },
        {
          title: "用户手机号码",
          align: "center",
          key: "phone_number"
        },
        {
          title: "充值类型",
          align: "center",
          key: "variety",
          render: (h, params) => {
            return h("div", [
              h("span", this.translateVariety(params.row.variety))
            ]);
          }
        },
        {
          title: "充值前京币",
          align: "center",
          key: "before_bean_count",
          render: (h, params) => {
            let renderText = `${params.row.before_bean_count / 100}`;
            return h("div", [h("span", renderText)]);
          }
        },
        {
          title: "充值后京币",
          align: "center",
          key: "after_bean_count",
          render: (h, params) => {
            let renderText = `${params.row.after_bean_count / 100}`;
            return h("div", [h("span", renderText)]);
          }
        },
        {
          title: "状态",
          align: "center",
          key: "status",
          render: (h, params) => {
            return h("div", [
              h("span", this.translateStatus(params.row.status))
            ]);
          }
        },
        {
          title: "备注",
          align: "center",
          key: "remark"
        }
      ],
      querys: {
        queryTips: ["用户手机号", "充值类型", "状态"],
        queryTypes: ["input", "select", "select"],
        queryLists: [
          null,
          [
            {
              value: "agent",
              label: "客服充值"
            },
            {
              value: "auto",
              label: "自动充值"
            }
          ],
          [
            {
              value: "manual",
              label: "手工到账"
            },
            {
              value: "alipay",
              label: "支付宝充值"
            }
          ]
        ],
        queryParamNames: ["phoneNumber", "variety", "status"]
      }
    };
  },
  filters: {},
  methods: {
    translateVariety(variety) {
      switch (variety) {
        case "agent":
          return "客服充值";
          break;
        case "auto":
          return "自动充值";
          break;
        default:
          return "- -";
          break;
      }
    },
    translateStatus(status) {
      switch (status) {
        case "manual":
          return "手工到账";
          break;
        case "alipay":
          return "支付宝充值";
          break;
        default:
          return "- -";
          break;
      }
    }
  },
  components: {
    qtable
  },
  mounted: function() {}
};
</script>

<style lang="less">
.page-add {
  padding: 10px;
}
</style>
